<template>
	<div>
		<el-card class="box-card">
			<div slot="header" class="clearfix">
				<span>文章列表</span>
			</div>
			<!-- 搜索区域 -->
			<div class="search-box">
				<el-form :inline="true" :model="q">
					<el-form-item label="文章分类">
						<el-select
							v-model="q.cate_id"
							placeholder="请选择分类"
							size="small">
							<el-option
								:label="item.cate_name"
								:value="item.id"
								v-for="item in cateList"
								:key="item.id"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="发布状态" style="margin-left: 15px">
						<el-select v-model="q.state" placeholder="请选择状态" size="small">
							<el-option label="已发布" value="已发布"></el-option>
							<el-option label="草稿" value="草稿"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" size="small" @click="screening"
							>筛选</el-button
						>
						<el-button type="info" size="small" @click="reset">重置</el-button>
					</el-form-item>
				</el-form>
				<!-- 发表文章的按钮 -->
				<el-button
					type="primary"
					size="small"
					class="btn-pub"
					@click="showPubDialogFn"
					>发表文章</el-button
				>
			</div>
			<!-- 文章表格区域 -->
			<el-table :data="artList" style="width: 100%" border stripe>
				<el-table-column label="文章标题">
					<template v-slot="{ row }">
						<el-link type="primary" @click="showDetailFn(row.id)">{{
							row.title
						}}</el-link>
					</template>
				</el-table-column>
				<el-table-column label="分类" prop="cate_name"></el-table-column>
				<el-table-column label="发表时间" prop="pub_date">
					<template v-slot="{ row }">
						<span>{{ $formatDate(row.pub_date) }}</span>
					</template>
				</el-table-column>
				<el-table-column label="状态" prop="state"></el-table-column>
				<el-table-column label="操作">
					<template v-slot="{ row }">
						<el-button type="danger" size="mini" @click="removeFn(row.id)"
							>删除</el-button
						>
					</template>
				</el-table-column>
			</el-table>
			<!-- 分页区域 -->
			<el-pagination
				background
				@size-change="handleSizeChange"
				@current-change="handleCurrentChange"
				:current-page="q.pagenum"
				:page-sizes="[5, 10, 15, 20]"
				:page-size="q.pagesize"
				layout="total, sizes, prev, pager, next, jumper"
				:total="total">
			</el-pagination>
		</el-card>
		<!-- 发表文章的对话框 -->
		<el-dialog
			title="发表文章"
			:visible.sync="pubDialogVisible"
			fullscreen
			@closed="onDialogClosedFn"
			:before-close="handleClose">
			<el-form
				:model="pubForm"
				:rules="pubFormRules"
				ref="pubFormRef"
				label-width="100px">
				<el-form-item label="文章标题" prop="title">
					<el-input v-model="pubForm.title" placeholder="请输入标题"></el-input>
				</el-form-item>
				<el-form-item label="文章分类" prop="cate_id">
					<el-select
						v-model="pubForm.cate_id"
						placeholder="请选择分类"
						style="width: 100%">
						<el-option
							:label="item.cate_name"
							:value="item.id"
							v-for="item in cateList"
							:key="item.id"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="文章内容" prop="content">
					<quill-editor v-model="pubForm.content"></quill-editor>
				</el-form-item>
				<el-form-item label="文章封面">
					<!-- 用来显示封面的图片 -->
					<img
						src="../../assets/images/cover.jpg"
						alt=""
						class="cover-img"
						ref="imgRef" />
					<br />
					<!-- 文件选择框，默认被隐藏 -->
					<input
						type="file"
						style="display: none"
						@change="onCoverChangeFn"
						accept="image/*"
						ref="iptFileRef" />
					<!-- 选择封面的按钮 -->
					<el-button type="text" @click="chooseImgFn">+ 选择封面</el-button>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="pubArticleFn('已发布')"
						>发布</el-button
					>
					<el-button type="info" @click="pubArticleFn('草稿')"
						>存为草稿</el-button
					>
				</el-form-item>
			</el-form>
		</el-dialog>
		<!-- 查看文章详情的对话框 -->
		<el-dialog title="文章预览" :visible.sync="detailVisible" width="80%">
			<h1 class="title">{{ artDetail.title }}</h1>

			<div class="info">
				<span>作者：{{ artDetail.nickname || artDetail.username }}</span>
				<span>发布时间：{{ $formatDate(artDetail.pub_date) }}</span>
				<span>所属分类：{{ artDetail.cate_name }}</span>
				<span>状态：{{ artDetail.state }}</span>
			</div>
			<!-- 分割线 -->
			<el-divider></el-divider>
			<!-- 文章的详情 -->
			<div v-html="artDetail.content" class="detail-box"></div>
		</el-dialog>
	</div>
</template>

<script>
import {
	getArtCateListAPI,
	uploadArticleAPI,
	getArticleListAPI,
	getArticleDetailFn,
	delArticleDetailAPI
} from '@/api'
import defaultImg from '@/assets/images/cover.jpg'
export default {
	name: 'ArtList',
	data() {
		return {
			// 查询参数对象
			q: {
				pagenum: 1,
				pagesize: 5,
				cate_id: '',
				state: ''
			},
			pubDialogVisible: false,
			pubForm: {
				title: '',
				cate_id: '',
				content: '',
				cover_img: null,
				state: ''
			},
			// 表单的验证规则对象
			pubFormRules: {
				title: [
					{ required: true, message: '请输入文章标题', trigger: 'blur' },
					{
						min: 1,
						max: 30,
						message: '文章标题的长度为1-30个字符',
						trigger: 'blur'
					}
				],
				cate_id: [
					{ required: true, message: '请选择文章标题', trigger: 'blur' }
				],
				content: [
					{ required: true, message: '请输入文章内容', trigger: 'blur' }
				]
			},
			cateList: [],
			artList: [],
			total: 0,
			detailVisible: false, // 控制文章详情对话框的显示与隐藏
			artDetail: {}
		}
	},
	created() {
		this.getCateList()
		this.getArtListFn()
	},
	methods: {
		showPubDialogFn() {
			this.pubDialogVisible = true
		},
		async getCateList() {
			const { data: res } = await getArtCateListAPI()
			if (res.code === 0) {
				this.cateList = res.data
			}
		},
		// 对话框关闭前的回调
		async handleClose(done) {
			const confirmResult = await this.$confirm(
				'此操作将导致文章信息丢失, 是否继续?',
				'提示',
				{
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}
			).catch((err) => err)
			if (confirmResult === 'cancel') return
			// 确认关闭
			done()
		},
		//文章封面
		chooseImgFn() {
			this.$refs.iptFileRef.click()
		},
		//判断用户是否选择默认封面
		onCoverChangeFn(e) {
			const files = e.target.files
			if (files.length === 0) {
				this.pubForm.cover_img = null
				this.$refs.imgRef.setAttribute('src', defaultImg)
			}
			this.pubForm.cover_img = files[0]
			const url = URL.createObjectURL(files[0])
			this.$refs.imgRef.setAttribute('src', url)
		},
		//发布
		pubArticleFn(state) {
			this.pubForm.state = state
			this.$refs.pubFormRef.validate(async (valid) => {
				if (!valid) return this.$message.error('请完善文章信息！')
				if (!this.pubForm.cover_img)
					return this.$message.error('请选择文章封面！')
				const fd = new FormData()
				Object.keys(this.pubForm).forEach((key) => {
					fd.append(key, this.pubForm[key])
				})
				const { data: res } = await uploadArticleAPI(fd)
				if (res.code !== 0) return this.$message.error(res.message)
				this.$message.success(res.message)
				this.pubDialogVisible = false
				this.getArtListFn()
			})
		},
		//清空数据
		onDialogClosedFn() {
			this.$refs.pubFormRef.resetFields()
			this.pubForm.content = ''
			this.$refs.imgRef.setAttribute('src', defaultImg)
		},
		//获取文章列表
		async getArtListFn() {
			const { data: res } = await getArticleListAPI(this.q)
			if (res.code !== 0) return this.$message.error(res.message)
			this.artList = res.data
			this.total = res.total
		},
		handleSizeChange(newSize) {
			this.q.pagesize = newSize
			this.q.pagenum = 1
			this.getArtListFn()
		},
		handleCurrentChange(newPage) {
			this.q.pagenum = newPage
			this.getArtListFn()
		},
		// 筛选
		screening() {
			this.pagenum = 1
			this.getArtListFn()
		},
		reset() {
			this.pagenum = 1
			this.pagesize = 5
			this.q.cate_id = ''
			this.q.state = ''
			this.getArtListFn()
		},
		// 获取文章详情
		async showDetailFn(id) {
			const { data: res } = await getArticleDetailFn(id)
			if (res.code !== 0) return this.$message.error('获取文章详情失败!')
			this.artDetail = res.data
			this.detailVisible = true
		},
		// 删除文章
		async removeFn(id) {
			const confirmResult = await this.$confirm(
				'此操作将永久删除该文件, 是否继续?',
				'提示',
				{
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}
			).catch((err) => err)
			if (confirmResult === 'cancel') return
			const { data: res } = await delArticleDetailAPI(id)
			if (res.code !== 0) return this.$message.error('删除失败!')
			this.$message.success('删除成功!')
			this.getArtListFn()
		}
	}
}
</script>

<style lang="less" scoped>
.search-box {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	.btn-pub {
		margin-top: 5px;
	}
}
::v-deep .ql-editor {
	min-height: 300px;
}
.cover-img {
	width: 400px;
	height: 280px;
	object-fit: cover;
}
.el-pagination {
	margin-top: 15px;
}
.title {
	font-size: 24px;
	text-align: center;
	font-weight: normal;
	color: #000;
	margin: 0 0 10px 0;
}

.info {
	font-size: 12px;
	span {
		margin-right: 20px;
	}
}

// 修改 dialog 内部元素的样式，需要添加样式穿透
::v-deep .detail-box {
	img {
		width: 500px;
	}
}
</style>
